<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%>
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/jquery-ujs.js"></script>
</head>
<style type="text/css">
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>
<body>
        <table class="gridtable" align=center width="90%" style="margin-top:50px;">
            <tr>
                <th colspan="8">计划中的任务</th>
            </tr>
            <tr id="PlanJob">
                <th>任务名称</th>
                <th>任务组</th>
                <th>时间表达式</th>
                <th>状态</th>
                <th>备注</th>
                <th>下次运行时间</th>
                <th>修改JOB运行时间(格式:0 0 8 ? * * *)</th>
                <th>操作</th>
            </tr>
             <c:forEach items="${jobList}" var="jobList">
                <tr id="PlanJobNode">
                    <td>${jobList.jobName}<input name="jobName" type="hidden" value="${jobList.jobName}"/></td>
                    <td>${jobList.jobGroup}<input name="jobGroup" type="hidden" value="${jobList.jobGroup}"/></td>
                    <td>${jobList.cronExpression}</td>
                    <td>${jobList.jobStatusValue}</td>
                    <td>${jobList.desc}</td>
                    <td>${jobList.nextFireTime}</td>
                    <td><input type="text" name="cron" id="cron"></td>
                    <td>
                        <c:choose>
                            <c:when test="${jobList.jobStatus == 'NORMAL'}">
                                <input type="button" value="暂停" onclick="pauseJobA('${jobList.jobName}','${jobList.jobGroup}')"/>
                            </c:when>
                            <c:when test="${jobList.jobStatus == 'PAUSED'}">
                                <input type="button" value="恢复" onclick="resumeJobA('${jobList.jobName}','${jobList.jobGroup}')"/>
                            </c:when>
                           <c:otherwise>
                                <input type="button" value="恢复" onclick="resumeJobA('${jobList.jobName}','${jobList.jobGroup}')"/>
                           </c:otherwise>
                          </c:choose>
                        &nbsp;&nbsp;<input type="button" value="立即执行" onclick="triggerJobA('${jobList.jobName}','${jobList.jobGroup}')"/>
                        &nbsp;&nbsp;<input type="button" value="修改JOB运行时间" id="changeTime" class="changeTime"/>
                    </td>
                </tr>
             </c:forEach>
        </table>
        <table class="gridtable" align=center width="90%" style="margin-top:50px;">
            <tr>
                <th colspan="6">运行中的任务</th>
            </tr>
            <tr id="AttachedJob">
                <th>任务名称</th>
                <th>任务组</th>
                <th>状态</th>
                <th>备注</th>
            </tr>
             <c:forEach items="${jobList2}" var="jobList2">
                <tr id="AttachedJobNode">
                    <td>${jobList2.jobName}</td>
                    <td>${jobList2.jobGroup}</td>
                    <td>${jobList2.jobStatusValue}</td>
                    <td>${jobList2.desc}</td>
                </tr>
             </c:forEach>
        </table>
</body>
<script>
    $(function(){
       initializationChangeTime();
    });

    function initializationChangeTime() {
        $('body').find('.changeTime').on('click',function() {
            var jobName = $(this).closest('tr').find("input[name='jobName']").val();
            var jobGroup = $(this).closest('tr').find("input[name='jobGroup']").val();
            var cron = $.trim($(this).closest('tr').find("input[name='cron']").val());
            if (cron == "") {
                alert("请输入要修改的时间");
                return;
            }
            $.ajax({
               url: "/qrtz/rescheduleJob/",
               type: "GET",
               data:{
                   "jobName":jobName,
                   "jobGroup":jobGroup,
                   "cron":cron
               },
               dataType: "json",
               success: function(data) {
                   if (data == true) {
                       alert("修改成功");
                       refresh();
                   }
               }
            });
        });
    }

    var refresh = function() {
         $.ajax({
            url: "/qrtz/getPlanJobA/",
            type: "GET",
            dataType: "json",
            success: function(data) {
                $("tr[id=PlanJobNode]").remove();
                $.each(data.jobList,function(index,item){
                    var jobName = item.jobName;
                    var jobGroup = item.jobGroup;
                    if (item.jobStatus == "NORMAL") {
                        $("#PlanJob").after('<tr id="PlanJobNode"><td>' + item.jobName + '<input name="jobName" type="hidden" value="' + item.jobName + '"/></td><td>' + item.jobGroup + '<input name="jobName" type="hidden" value="' + item.jobGroup + '"/></td><td>' + item.cronExpression + '</td><td>' + item.jobStatusValue + '</td><td>' + item.desc + '</td><td>' + item.nextFireTime + '</td><td><input type="text" name="cron" id="cron"></td><td><input type="button" value="暂停" onclick="pauseJobA(\''+jobName+'\',\''+jobGroup+'\')"/>&nbsp;&nbsp;<input type="button" value="立即执行" onclick="triggerJobA(\''+jobName+'\',\''+jobGroup+'\')"/><input type="button" value="修改JOB运行时间" id="changeTime" class="changeTime"/></td></tr>');
                    } else {
                        $("#PlanJob").after('<tr id="PlanJobNode"><td>' + item.jobName + '<input name="jobName" type="hidden" value="' + item.jobName + '"/></td><td>' + item.jobGroup + '<input name="jobName" type="hidden" value="' + item.jobGroup + '"/></td><td>' + item.cronExpression + '</td><td>' + item.jobStatusValue + '</td><td>' + item.desc + '</td><td>' + item.nextFireTime + '</td><td><input type="text" name="cron" id="cron"></td><td><input type="button" value="恢复" onclick="resumeJobA(\''+jobName+'\',\''+jobGroup+'\')"/>&nbsp;&nbsp;<input type="button" value="立即执行" onclick="triggerJobA(\''+jobName+'\',\''+jobGroup+'\')"/><input type="button" value="修改JOB运行时间" id="changeTime" class="changeTime"/></td></tr>');
                    }
                })
                initializationChangeTime();
            }
         });

         $.ajax({
            url: "/qrtz/getAttachedJobA/",
            type: "GET",
            dataType: "json",
            success: function(data) {
                $("tr[id=AttachedJobNode]").remove();
                $.each(data.jobList2,function(index,item){
                    $("#AttachedJob").after("<tr id='AttachedJobNode'><td>" + item.jobName + "</td><td>" + item.jobGroup + "</td><td>" + item.jobStatusValue + "</td><td>" + item.desc + "</td></tr>");
                })
            }
         });
    }

    setInterval(refresh, 50000);

    function pauseJobA(jobName,jobGroup) {
        $.ajax({
            url: "/qrtz/pauseJobA/",
            type: "GET",
            data:{
                "jobName":jobName,
                "jobGroup":jobGroup
            },
            dataType: "json",
            success: function(data) {
                if (data == true) {
                    refresh();
                }
            }
        });
    }

    function resumeJobA(jobName,jobGroup) {
        $.ajax({
            url: "/qrtz/resumeJobA/",
            type: "GET",
            data:{
                "jobName":jobName,
                "jobGroup":jobGroup
            },
            dataType: "json",
            success: function(data) {
                if (data == true) {
                    refresh();
                }
            }
        });

    }


    function triggerJobA(jobName,jobGroup) {
        $.ajax({
            url: "/qrtz/triggerJobA/",
            type: "GET",
            data:{
                "jobName":jobName,
                "jobGroup":jobGroup
            },
            dataType: "json",
            success: function(data) {
                if (data == true) {
                    refresh();
                }
            }
        });
    }
</script>
</html>
